<template>
    <div class="main-box">
        <div class="box-title">

            <div class="title-text" @click="ii">

                <div class="text">企业名字</div>
                <div class="text">标题</div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="content-bt"></div>
            </div>
        </div>
        <div class="box-content" v-for="item in msglist" :key="item.id">
            <div class="content-msg" >
                <div class="text">{{ item.qyname }}</div>
                <div class="text">{{ item.title }}</div>
                <div class="text"></div>
                <div class="text"></div>
                <div class="content-bt">
                    <div class="bt" @click="this.opbt = !this.opbt,open(item.id)" >查看</div>
                    <div class="bt" @click="userdelete(item.id)">删除</div>
                </div>
            </div>
        </div>
        <div v-if="this.opbt" class="mengceng">
            <div class="submitfrom">
                    <div class="from-box" v-for="(item,index) in this.username.list" :key="index">
                        <div class="img">
                            <img class="img-touxiang" :src="item.img" alt="">
                            <div class="guanbi" @click="this.opbt = !this.opbt"><img src="/static/img/guanbi.svg" alt=""></div>
                        </div>
                        <div class="msg">
                            <div class="msg-left">
                                <!-- <div>
                                    {{ item.title }}
                                </div>
                                <div>
                                    {{ item.qyname }}
                                </div>
                                <div>
                                    <p v-html="item.zhize"></p>
                                </div>
                                <div>
                                    {{ item.yaoqiu }}
                                </div> -->
                            </div>
                            <div class="msg-right">
                                <div class="right-title bor">
                                   <div class="title-a">{{ item.title }}</div>
                                   <div class="title-a">{{ item.xinzi }}/天</div>
                                </div>
                                <div class="bor">
                                    <div><span class="name">企业名字:</span>{{ item.qyname }}</div>
                                </div>
                                <div class="bor">
                                    <div class="ti">岗位职责</div>
                                    <div >{{ requirement }}</div>
                                </div>
                                <div class="bor">
                                    <div class="ti">岗位要求</div>
                                    <div >{{ responsibility }}</div>
                                </div>
                            </div>

                        </div>

                    </div>
                <div >
                    
                </div>


            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'


export default {
  props: ['msglist'],
  data () {
    return {
      opbt: false,
      username: {
        list: [{
        //   id: 1,
        //   title: '勤工俭学',
        //   img: '/static/img/1.svg',
        //   qyname: 'YYY',
        //   xinzi: '100',
        //   zhize: 'aaaaaa<br>bbbbbb',
        //   yaoqiu: 'cccccc<br>ddddddddd'
        }]
      },
      requirement:'',
      responsibility:''
   
    }
  },
  methods: {
    open (id) {
      axios.get('/api/qiyemsgid?id=' + id).then(res =>{
        console.log(res.data)
        this.username.list = res.data
      }).then(res =>{
        axios.get('/api/details?id=' + id).then(res =>{
        console.log(res.data)
        this.requirement = res.data[0].requirement
        this.responsibility = res.data[0].responsibility
      })
      })

    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        //   alert('submit!')
          console.log('submit!!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    userdelete (id) {
      axios.delete('/api/dledetails?id=' + id).then(ref => {
        this.$message({
          message: '成功删除一条成功消息',
          type: 'success'
        });
      })
    }
  }

}

</script>

<style scoped lang="scss">
.main-box {
    // height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;

    .box-title {
        height: 30px;
        position: sticky;
        top: 0;
        background-color: #cccccc;
        .title-text{
            height: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .content-bt{
                width: 140px;
            }

        }
    }
    .text{
        width: 100px;
        text-align: center;
    }
    .box-content {
        width: 100%;
        background-color: #ffffff;
        .content-msg{
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom:1px solid #cccccc ;
        }
        .content-msg:hover{
        background-color: #0099CC;
        }
        .content-bt{
            width: 140px;
            display: flex;

            .bt{
                height: 25px;
                width: 50px;
                margin: 0 10px;
                text-align: center;
                line-height: 25px;
                border-radius: 20px;
                background-color: #99CCCC;
                cursor: pointer;
            }
        }
    }
    .mengceng{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        min-width: 1000px;
        background-color:rgba($color: #000000, $alpha: 0.3);
        z-index: 99;
    }
    .submitfrom{
        width: 80%;
        height: 500px;
        position: relative;
        top:100px;
        left: 100px;
        background-color: #ffffff;
        min-width: 800px;
        padding: 20px;
        z-index: 100;
        border-radius: 20px;
        .from-box{

            display: flex;
            flex-direction: column;
        }
        .img{
            height: 100%;
            width: 100%;
           display: flex;
           justify-content: space-between;
           padding: 10px 0;
           border-bottom: 1px solid #cccccc;
           .img-touxiang{
            width: 100px;
            height: 100px;
            border-radius: 50%;
           }
           .guanbi{
            width: 50px;
            height: 50px;
            cursor: pointer;
            img{
                width: 50px;
                height: 50px;
            }
           }
        }

        .msg{
            height: 280px;
            margin-top: 20px;
            display: flex;
            .msg-left{
                flex: 0;
                padding-top: 10px;
                color: #ffffff;
            }
            .msg-right{
                flex: 1;
                color: #0d0606;
                .right-title{
                    display: flex;
                    justify-content: space-between;
                    .title-a{
                        color: #FF6666;
                    }
                }
                .bor{
                    padding: 10px 0;
                    margin-left: 20px;
                    border-bottom: 1px solid #cccccc;
                    .name{
                        color: #0099CC;
                        margin-right: 20px;
                    }
                }
                .ti{
                    font-size: 20px;
                    color: #0099CC;
                }
            }

        }
    }


}
</style>